/*
 * @Author: Leo.wang wanglizhigs@163.com
 * @Date: 2023-11-30 17:18:55
 * @LastEditors: Leo.wang wanglizhigs@163.com
 * @LastEditTime: 2024-01-29 23:12:37
 * @FilePath: /tuberculosis_screening_app/src/components/common/select.tsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import { defineComponent, ref } from "vue";
import { fieldProps } from "vant";

type Column = {
  text: String;
  value: string;
};
const props = Object.assign(
  {
    modelValue: {
      type: String,
      default: "",
    },
    columns: {
      type: Array<Column>,
      default: [],
    },
  },
  fieldProps
);
export default defineComponent({
  name: "Select",
  props: props,
  setup(props, { emit }) {
    const model = ref(props.modelValue);
    const modelText = ref<String>('');
    const current = props.columns.find(item => item.value === props.modelValue);
    if(current) {
      modelText.value = current.text;
    }
    let isShow = ref(false);
    const onConfirm = ({ selectedOptions }: any) => {
      model.value = selectedOptions[0]?.value;
      modelText.value = selectedOptions[0]?.text;
      isShow.value = false;
      emit("update:modelValue", model.value);
    };

    return () => (
      <>
        <van-field
          {...props}
          v-model={modelText.value}
          onClick={() => {
            isShow.value = true;
          }}
        />
        {
          props.columns.length ? <van-popup v-model:show={isShow.value} position="bottom">
          <van-picker
            columns={props.columns}
            onConfirm={onConfirm}
            onCancel={() => {
              isShow.value = false;
            }}
          />
        </van-popup> : ''
        }
      </>
    );
  },
});
